<template>
	<view class="goods-detail">
		<view class="calendarPage-top">
			<view class="order-box">
				<view class="title mt20">别克 GL8 2021款</view>
				<view class="mt10"> 归属门店：北京市朝阳区望京SOHO</view>
				<view class="mt10"> 关联车辆：苏A625UL</view>
			</view>
			<view class="order-box flex-jc">
				<view style="flex-shrink: 0;">
					<view>周中定价：周一，二，三：169/天</view>
					<view class="mt10">周末定价：周一，二，三：169/天</view>
				</view>
				<up-button type="primary" color="#986C5D" shape="circle" size="mini" plain text="周末周中定价"
					@click="weekendPrice" style="width: 200px;"></up-button>
			</view>
		</view>
		<view class="calendarPage-center">
			<CustomCalendar @select="handleSelect"></CustomCalendar>
		</view>

		<view class="calendarPage-bottom">
			<view>
				<text class="blue">蓝色：周末价</text> <text class="red">红色：节假日&手动改价格</text> <text class="black">黑色：平日价</text>
			</view>
			<view class="flex-jc">
				<up-button type="primary" color="#986C5D" shape="circle" plain text="区间改价"
					@click="rangeChangePrice"></up-button>
				<up-button type="primary" color="#986C5D" shape="circle" text="日历手动改价" @click="changePrice"></up-button>
			</view>
		</view>

		<ClosePopup title="日历手动改价" ref="changePriceClosePopupRef" height="38vh">
			<view class="close-popup-content">
				<view class="mt20">改的日期：<text v-for="item in selectDate">
						{{ item.getMonth() + 1 }}-{{ item.getDate() }}、</text>
				</view>
				<view class="flex-ac mt20">
					<view class="left-label">价格修改为</view>
					<up-input placeholder="请输入" border="none" color="#999" type="number"></up-input>
					<view class="unit">元/天</view>
				</view>
				<view class="flex-jc popup-btn-group">
					<up-button type="primary" color="#B98A73" plain shape="circle" text="取消" @click="cancel"></up-button>
					<up-button type="primary" color="#B98A73" shape="circle" text="提交" @click="submit"></up-button>
				</view>
			</view>
		</ClosePopup>

		<ClosePopup title="区间改价" ref="rangeChangePriceClosePopupRef" height="38vh">
			<view class="close-popup-content">
				<view class="mt20 flex-ac">
					<view>区间：</view>
					<view>请选择日期区间</view>
				</view>
				<view class="flex-ac mt20">
					<view class="left-label">价格</view>
					<up-input placeholder="请输入价格" border="none" color="#999" type="number"></up-input>
					<view class="unit">元/天</view>
				</view>
				<view class="flex-jc close-popup-btn-group">
					<up-button type="primary" color="#B98A73" plain shape="circle" text="取消" @click="cancel"></up-button>
					<up-button type="primary" color="#B98A73" shape="circle" text="确认改价"
						@click="confirmChangePrice"></up-button>
				</view>
			</view>
		</ClosePopup>

		<ClosePopup title="周末周中定价" ref="weekendPriceClosePopupRef" height="70vh">
			<view class="close-popup-content">
				<view class="flex-ac mt20">
					<view class="left-label">周中</view>
					<up-input placeholder="请输入" border="none" color="#999" type="number"></up-input>
					<view class="unit">元/天</view>
				</view>
				<view class="week-box flex mt20">
					<view v-for="(item, index) in week" :class="{ 'item': true, 'active': weekSelect[index] }"
						@click="weekSelect[index] = !weekSelect[index]">{{ item }}
					</view>
				</view>
				<view class="flex-ac mt20">
					<view class="left-label">周末</view>
					<up-input placeholder="请输入" border="none" color="#999" type="number"></up-input>
					<view class="unit">元/天</view>
				</view>
				<view class="week-box flex mt20">
					<view v-for="(item, index) in week" :class="{ 'item': true, 'active': !weekSelect[index] }"
						@click="weekSelect[index] = !weekSelect[index]">{{ item }}
					</view>
				</view>
				<view class="flex-jc popup-btn-group">
					<up-button type="primary" color="#B98A73" plain shape="circle" text="取消" @click="cancel"></up-button>
					<up-button type="primary" color="#B98A73" shape="circle" text="提交"
						@click="weekendSubmit"></up-button>
				</view>
			</view>
		</ClosePopup>
	</view>
</template>
<script setup>
import { ref, reactive } from "vue"
import { onReady, onLoad } from "@dcloudio/uni-app"
import CustomCalendar from "@/components/custom-calendar/index.vue";
import ClosePopup from "@/components/close-popup/index.vue";
import { postRequest } from "@/reuqest/request.js";
import dayjs from 'dayjs'

const changePriceClosePopupRef = ref(null)
const weekendPriceClosePopupRef = ref(null)
const rangeChangePriceClosePopupRef = ref(null)

const week = ref(["周一", "周二", "周三", "周四", "周五", "周六", "周天"])
const weekSelect = ref([0, 0, 0, 0, 0, 0, 0])

const selectDate = ref([])

const model = reactive({
	modelUuid: "",
	storeUuid: ""
})

const changePrice = () => {
	if (selectDate.value.length) {
		changePriceClosePopupRef.value.open()
		return
	}
	uni.$u.toast("请先选择日期")
}

const weekendPrice = () => {
	weekendPriceClosePopupRef.value.open()
}

const handleSelect = (date) => {
	selectDate.value = date
}

const formatter = (day) => {
	const d = new Date();
	let month = d.getMonth() + 1;
	const date = d.getDate();
	if (day.day == date + 3) {
		day.bottomInfo = '有优惠';
	}
	return day;
};

const submit = () => {

}

const weekendSubmit = () => {

}

const confirmChangePrice = () => {
}

const rangeChangePrice = () => {
	rangeChangePriceClosePopupRef.value.open()
}


const getData = (modelUuid, storeUuid) => {
	const now = dayjs()
	const endDate = now.add(6, 'month')
	postRequest("/wx-operation/api/v1/bm/rental/overview/page", {
		pageNum: 1,
		pageSize: 1000,
		storeUuid,
		modelUuid,
		channelCode: "",
		startDate: now.format('YYYY-MM-DD'),
		endDate: endDate.format('YYYY-MM-DD'),
	}).then(res => {
		if (res.bizCode === "00000") {
			console.log(res.data)
			list.value = res.data?.list || [];
		}
	})
}
onLoad((options) => {

	console.log("onLoad", options)
	if (options && options.modelUuid && options.storeUuid) {
		getData(options.modelUuid, options.storeUuid)
	}
})

const cancel = () => {
	changePriceClosePopupRef.value.close()
	weekendPriceClosePopupRef.value.close()
	rangeChangePriceClosePopupRef.value.close()
}
onReady(() => { });
const confirm = (date) => { }

</script>
<style lang="scss" scoped>
::v-deep .u-popup__content__close {
	display: none;
}

.goods-detail {
	width: 100vw;
	// height: 100vh;
	// overflow: hidden;
	display: flex;
	flex-direction: column;
	font-size: 20rpx;

	.calendarPage-top {

		.title {
			font-size: 24rpx;
			font-weight: bold;
		}

		button {
			width: 100px !important;
			margin: 0;
		}
	}

	.calendarPage-center {
		flex: 1;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
	}

	.calendarPage-bottom {

		padding: 20rpx 40rpx;

		text {
			margin-right: 32rpx;
		}

		.blue {
			color: #0A93E5;
		}

		.red {
			color: #FF5555;
		}

		.black {
			color: black;
		}

		button {
			width: 40%;
			margin: 40rpx 0 0;
		}
	}

}

.close-popup-content {

	.left-label {
		margin-right: 30rpx;
		font-size: 30rpx;
	}

	.week-box {
		border-top: 1px solid #EBEBEB;
		padding: 20rpx;
		gap: 30rpx;
		flex-wrap: wrap;

		.item {
			width: 140rpx;
			text-align: center;
			line-height: 60rpx;
			background: #f6f8fb;
			border-radius: 10rpx;

			&.active {
				color: #fff;
				background: #B98A73;
			}
		}
	}

	button {
		width: 130px !important;
		margin: 0;
		border: none !important;
		border-color: transparent !important;
	}
}
</style>
